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ABSTRACT 



This paper describes basic types of World Wide Web pages and 
presents design criteria for page layout based on principles of visual 
literacy. Discussion focuses on pages that present information in the 
following styles: billboard; directory/index; textual; and graphics. Problems 
and solutions in Web page construction are explored according to these 
principles. Discussion includes: (1) lack of common page layout tags, 

variability in the forms of HyperText Markup Language, and variability in 
equipment as the biggest problems facing Web designers; (2) solutions to 
layout/ textual problems; include turning all text to graphics; (3) logical as 
preferred to physical styles in markup; (4) remembering to take into account 
users with non-graphical browsers and small monitors; (5) visual cues to 
identify "hot links" or links; and (6) "validating" the page by checking for 
nonstandard tags, misapplied tags, or improper syntax. (AEF) 



* Reproductions supplied by EDRS are the best that can be made * 

* from the original document. * 

******************************************************************************** 



erIc 



U 

OH^ S o,^ u P 4?™^T OF EDUCATION _ 



00 

ON 

00 

o 



Q 

W 



bo 



s 



o 



Office of Educational rIL U ;, EDUCATION 
EDI JPATinM a i Research and Improvement 
UCATIONAL RESOURCES INFORMATIO 



n Thi „ CENTER (ERIC) 

2SiJlSd^ n L has been reproduced as 
originating™ PerS ° n 0r or 9 ani2alion 



Visual Design Principles Applied To World Wide Web Construction ° SSTntr 10 



by Donald D. Luck 
and J. Mark Hunter 



documenting op ' nions stated in this 
official ncp? n °t, nece ssarily represent 
otticial OERI position or policy. 



Abstract 

The purpose of the article is to describe three basic types of web pages and begin to create 
guides for page layout design based on principles consistent with principles of visual literacy. 
Problems and solutions in web page construction are explored with these principles in mind. 



Visual Design and the Web 

The World Wide Web (WWW) has 
opened a new horizon for would be 
publishers of information in digital form. 
Until now, the power of the press was 
available to those who owned a press. 
Today, the power to communicate with 
millions of people is in the grasp of anyone 
who has a computer, the knowledge to 
create a web page, and the $20-$30 per 
month to maintain a connection to the 
Internet. One writer claims a new web page 
is added every 30 seconds (Descy, 1996). 
Given proliferation of web sites and wide 
spread access to the medium, a general lack 
of attention to the visual design elements of 
this medium is apparent. Many developers 
of WWW sites have little or no fundamental 
understanding of the elements or importance 
of visual design. 

This paper has two purposes: 1) establish 
categories of web pages and 3 establish 
design criteria for these types of pages based 
on sound visual design principles. The intent 
is to help a WWW designer create a site that 
is not only rich in content, but is visually 
and aesthetically accessible to the user. 

Heinich, Molenda, Russell, and Smaldino 
(1995) state the primary goals of visual 
design, those being to: 

* ensure legibility; 

* reduce the effort required to interpret the 
message; 

* increase the viewer’s active engagement 
with the message; 

* focus attention on the most important 
parts of the message. 

How this is accomplished varies based on the 
type or purpose of web page being designed. 



What Medium? 

The categorization of the WWW and the 
graphical face of the Internet is open to 
some debate. Is it a projected visual? Non 
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projected? Is the interface just another type 
of multi-media? The primary, though not 
sole use of the WWW, is to display static 
images on a color cathode ray tube (CRT). 
Like applications of television and other 
projected visuals, some WWW pages are 
colorful and have a squarish aspect ratio 
(4:5) which varies among end users. Like 
print media, some WWW pages are text rich 
displays, but unlike print media the end user 
has a great deal of control over the final 
look of the document. 

The result is a media combining aspects of 
projected and non-projected visuals, a media 
where the author relinquishes many of the 
format controls over the final document 
found in other forms of media. Which rules 
of design apply to which pages is based 
primarily on the purpose of the page. The 
remainder of this article establishes a set of 
categories for pages and parts of pages that 
are used for the basis for design rules. 
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Types of Pages 

Billboard 

Billboard pages are the opening page of 
any location or related group of pages. Good 
Billboards accomplish two interrelated tasks. 

The first is to get the users attention so they 
stop and examine the page. With over six 
million documents available on the web it is 
important that the initial page grab the 
user's interest either by being aesthetically 
interesting or indicating the information the 
user desires is available at the site. Second is 
to provide a beginning point where the user 
can find more information. Pages should 
not be looked at in isolation. The Billboard 
page should initiate a continuing graphic 
theme seen throughout the related pages. 

The most important requirements for a good 
Billboard page are aesthetic appeal, clarity " PERMISS| o N to reproduce this 
of content and purpose, and ease of access MATERIAL HAS 8EEN GRANTE ° by 
to linked information. _ 
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Figure 1 

THE ADOBE HOME PAGE 
http://WWW.ADOBE.COM 
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Aesthetic appeal can be achieved through 
use of color, pattern, and arrangement of 
visual elements and by appealing use of text. 
Colors and organization should draw 
attention without overpowering the message 
of the page. The pattern established by this 
opening page should continue throughout all 
related pages. Billboard layouts should 
include the principles of good graphic design 
including balance, alignment, shape, style, 
color scheme and color appeal. When 
designing Billboard pages one should follow 
rules and principles for design of projected 
visuals. 

The Adobe page in Figure 1 illustrates 
good Billboard design. When seen on a color 
monitor has dramatic color that both draws 
attention to the various parts of the page 
and is aesthetically appealing. Objects are 
aligned creating a pattern which the users 
eye can follow and allows the user to easily 
make sense out of what they are seeing. 
Objects are defined by the vertical columns 
and by horizontal breaks. The page grabs 
your attention, defines what is there, and 
provides easy access to the divisions at the 
site. 



Directory/Index 

Directory and index pages provide a means 
to easily find information at a web site or to 
move from information to information. 
Some sites are exclusively indexes while 
others use an index to send users to the 
appropriate location within the site. 
Whichever, the primary purpose of a 
Directory/Index page is reducing the effort 
required by the user to find information. 
Directory/Index pages should be as straight 
forward as possible. Clarity and organization 
are key. These can be achieved by careful 
attention to using a consistent, appropriate 
organizational scheme throughout the index. 

To alleviate long scrolling lists many 
directories use a multi-column format. 
Column’s place more information on a page. 
When columns are used one must be aware 
of vertical and horizontal white space. Space 
is needed to separate both the columns and 
the entries in the columns to produce a 
useable document. 

Indexes should provide easy access to the 
most chosen sites. This can be accomplished 
by use of either a most often chosen list or 
placing the most popular under the 
classification heading at the root level. 
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Figure 2 

YAHOO DIRECTORY 
http://WWW.YAHOO.COM 
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The page example above from Yahoo 
illustrates good directory design. The 
directory is broken into two columns 
providing more information without 
scrolling. Major headings are logical and the 
most often used sub-directories are available 
on the main page. The page also provides 
and easily accessible search capability. 

Text 

Textual pages provide information in 
written form. Text and graphic are often the 
heart of a web site providing the meat for 
which the user is searching. Although no 
research could be found, it is reasonable to 
assume most extended text pages are printed 
for reading. Textual pages should therefore 
follow as closely to good print rules as 
possible keeping in mind the limitations of 
the media. Rules for textual pages would 
include number of • words per line, 
indentation, and justification. The indent, a 
basic rule of text, is nonexistent in HTML 



code. The most common means of 
producing an indent is through the use of a 
clear GIF graphic occupying a ten to fifteen 
point horizontal space. 

Graphics 

Like text pages, pages that provide 
information graphically are often the reason 
users are at a web site. Care should be taken 
to insure graphics on your pages follow as 
close as possible to the same rules that 
govern placing the graphics in printed form. 
Special care must be taken to insure the 
graphic is compressed using the correct 
compression algorithm. Good graphics 
becomes a compromise between the quality 
of the graphic and its size. Quality graphics 
add to the aesthetics of a page but long 
downloads reduce the usability of a page. 

An important use of graphics is for use as 
an index through a process called image 
mapping. Areas on an image are identified 
as “hot spots” or links by the author. 
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Clicking on these hot spots transfers the 
user to another location in the same way 
clicking on hot text transfers the user. The 
Adobe home page in the first illustration 
shows the use of an image-map. 

Input 

A unique feature of web pages is their 
ability to allow input from the user. Often 
the sole purpose of the page is to allow the 
user to provide input in some form. Clarity 
and ease of use are primary requirements for 
such pages. It should be clear not only what 
type of information is needed, but also how 
that information can be entered and sent by 
the user. 

Multi-Purpose 

While the following illustrate three of the 
most common purposes of web pages and 
suggestions for a resulting style, these do not 
describe all the types of pages. The most 
common type of page may well be a 
combination of two or all three of the 
defined types. In these cases, styles 
appropriate to the purpose should be applied 
to that part of the page. 

Problems in Authoring 

The biggest problems facing web page 
designers are lack of common page layout 
tags, variability in the forms of HyperText 
Markup Language, and variability in 
equipment. HyperText Markup Language, 
the language of web pages, does not contain 
standard commands for setting parameters 
easily established in text. When one lays 
out” a page in HTML one cannot be certain 
of the width and therefore length of the 
document, the size or style of font, or even 
the type face. Most browsers allow the 
individual to use standard settings for font 
and size but these settings can be easily 
changed in the two most often used browsers 
to meet the needs or aesthetic temperament 
of the user. Such standards are being 
introduced by the two largest browser 
manufacturers but haven’t yet been adopted 
by all browser manufacturers or approved by 
Internet Engineering Task Force (IETF), 
the organization that oversees the 4 official 
HTML code. 

Although all browsing software recognizes 
a standard set of commands or tags, some 



browsers do not recognize the command set 
of “extras” created for competing browsers. 

A magnificent effect on one browser can 
become a muddied hodgepodge of lines on 
another. Some browsers are incapable of 
showing graphics at all. If a directory is 
based solely on allowing the user to “click 
on” parts of a graphic for navigation and the 
user’s browser cannot show graphics the 
page is wasted. 

Size differences in user’s monitors as well 
as the type of computer or monitor being 
used adds another variable. A graphic which 
fits well on a fifteen-inch monitor needs to 
be scrolled on a thirteen-inch losing the 
aesthetic input of the graphic. Different 
computers also portray color palettes in 
different ways. For example, a graphic 
designed on a Macintosh using the standard 
palette may appear darker or muddied when 
shown on an MS-DOS based machine. 

Solutions 

Layout/text 

, Web pages follow the rules of design for 
projected visuals in some cases, non- 
projected in others. When pages are meant 
to capture the attention of the user rules for 
projected visuals are appropriate. Rules for 
non-projected visuals or text should be 
followed as closely as possible when 
designing pages that provide information. 
Common rules of text are difficult to 
enforce. Although lengths of text per line 
should remain between 50 to 70 characters 
(Amtson, 1993) this is nearly impossible to 
enforce when users are able to set their own 
font size and face, and width of page. There 
are ways to bypass these text layout 
problems. 

It is possible to turn all text to graphics. 
This gives the author absolute control over 
common text formats but requires the 
author to make a separate page for people 
without graphic browsers. It also increases 
the download time, complicates printing, 
and adds to the authoring process. In 
addition, the author must establish all links 
through an image map rather than the much 
easier and more universally used text link. 
Authors can place web pages in Adobe 
Acrobat format or other cross-platform 
readable format. This insures layout 
integrity but requires the user to have 
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additional software that while free requires 
downloading and setup and additional 
memory overhead. 

Some web authors provide guides on text 
documents suggesting the font face, size, and 
width of page to be used. Others may try 
pre-formatting the text. The new browsers 
by Netscape and Microsoft allow the user to 
set font face, and font size relative to the 
base size established by the user in their 
browser setting. This produces typographical 
effects closer to those achieved in print but 
still does not control for width of page or 
base font size. These tags work only on the 
specific browsers mentioned and the text 
appears the default standards for other 
browsers. 

Whenever marking up text it is best to use 
logical rather than physical styles. Logical 
styles refer to markups such as “strong” or 
“citation.” Each browser is capable of 
showing these styles in some manner. All 
browswer can not show logical markups such 
as “italics” or “bold.” The use of italics is 
discouraged as it is illegible at the default size 
of most browsers. 

Graphics 

When including graphics in a page authors 
should always remember to include alternate 
text for those who do not have access to a 
graphical browser. Graphics on the web use 
two formats, GIF and JPEG. GIF should be 
used for graphics with large sections of solid 
color. JPEG should be used with graphics 
with subtle changes in color or transitions 
from color to color. Use of the wrong 
format can result in larger files or banding. 
When using GIF files experiment with 
decreasing the color palette. Web graphics 
are a balance between size and picture 
quality. Remember there may be people 
downloading that beautiful 250K. picture 
using a 2400 Baud Modem. 

Also, remember to downsize your pictures 
to insure the picture will fit the user’s 
monitor. Most browsers use some space with 
command buttons, sliders, or information 
palettes. Having to scroll to see an entire 
picture destroys the aesthetic value of a 
picture. Often it is better to use thumbnails 
or small pictures that can be clicked to load 
the entire large picture if the user chooses. 

Color palettes differ among computers. 



Colors can be improved by creating images 
using the color palette of a specific browser. 
The graphics will be adequate on any browser 
and look spectacular on the browser for 
which they were designed. 

One concern for web authors is insuring 
hot spots on image-maps are identifiable. 
Most browsers provide a visual clue by 
changing the cursor from arrow to browsing 
finger when passing over a hot spot but 
many users are unaware of this change and 
other visual clues are necessary to inform 
the user of the hot spot. These visual clues 
could include text stating the image is linked 
to other pages, text, or animations. Always 
include a textual index on the page for those 
without graphic browsers. 

Testing the Page 

The first step in checking a page should 
be validation. Validation checks your pages 
for nonstandard tags, misapplied tags, or 
improper syntax. Various services such as 
those at the WebTechs location at 
HTTP ://www.webt echs.com/html-val-svc/ 
exist which will validate your pages over the 
web. Before publishing a page it is always 
wise to view the page in many browsers both 
graphic and text based. By trying your page 
in different browsers you can see what 
problem may happen for your users and 
alleviate them before the page is made 
public. 

If you want to produce a page that uses 
specific tags not usable on some browsers 
one might give the user a choice of type of 
page to access and let them make the choice 
based on the browser they use or use. With 
proper software information from the 
browser that is received by the server 
software can be used to select the type of 
page to send back. In either case additional 
work is required to produce multiple forms 
of the same page. It may be simpler to 
produce a single page that uses only standard 
tags and can be viewed on any browser. 
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